﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <link href="../css/MyCenter.css" rel="stylesheet" />
    <link href="../css/WeUI/weui.min.css" rel="stylesheet" />
    <link href="../css/mui/mui.min.css" rel="stylesheet" />
    <style>
        body {
            font-family: 'Microsoft YaHei';
        }

        p {
            font-size: 4.5vw;
        }
        .title {
            margin: 20px 15px 10px;
            color: #6d6d72;
            font-size: 15px;
        }
        .userimg{
            border-radius:50px;
        }
    </style>
    <title>详情页</title>
</head>
<body>
    <!-- <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: gray; font-size: 18px; height: 44px; line-height: 22px;" ></a>
        <h1 class="mui-title">详情页</h1>
    </header> -->
    <img src="../images/video.jpg" style="width:100%;">
    <div id="showIOSActionSheet" style="width:100%; height:70vw; text-align:center; line-height:80vw; position:absolute; top:0; ">
        <img style="width:20vw; height:20vw;" src="../images/play.png" />
    </div>
    <div class="weui-panel weui-panel_access" style="margin-top:0;">
        <div class="weui-panel__bd">
            <div class="weui-media-box weui-media-box_text">
                <h4 class="weui-media-box__title">Java基础<span style="float:right; margin-right:10px; color:#6d6d72; font-size:3vw;">
                                                            <img onclick="dianzan()" style="width:6vw; height:6vw;" src="" />
                                                            <span id="zan">123</span></span></h4>
                <h4 class="weui-media-box__title" style="color: #ff0000; font-weight: 600;">￥69元&nbsp;&nbsp;<del style="font-size:3.5vw; color:#6d6d72;">79元</del></h4>
                <p class="weui-media-box__desc">Java 基础语法 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作。下面简要介绍下类、对象、方法和实例变量的概念。</p>
            </div>
        </div>
    </div>
    <div class="title">
        课程介绍
    </div>
    <img style="width:100%;" src="../images/web.jpg" />
    <div class="title">
        用户评论
    </div>
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left userimg" src="../images/rose.jpg">
                <div class="mui-media-body">
                    Rose
                    <p class='mui-ellipsis'>这个视频真的特别棒！！！</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left userimg" src="../images/rose.jpg">
                <div class="mui-media-body">
                    Rose
                    <p class='mui-ellipsis'>这个视频真的特别棒！！！</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left userimg" src="../images/rose.jpg">
                <div class="mui-media-body">
                    Rose
                    <p class='mui-ellipsis'>这个视频真的特别棒！！！</p>
                </div>
            </a>
        </li>

    </ul>
    <p style="margin: 15px 15px 0;">
        用户须知：
    </p>
    <p style="margin: 10px 15px 0;">
        1、以上视频用户开通年度会员可以免费观看
    </p>
    <p style="margin: 10px 15px 0;">
        2、用户购买视频后仅供在本平台使用学习，不得在第三方平台进行传播该视频
    </p>
    <br />
    <div>
        <div class="weui-mask" id="iosMask" style="display: none"></div>
        <div class="weui-actionsheet" id="iosActionsheet">
            <div class="weui-actionsheet__title">
                <p class="weui-actionsheet__title-text" >购买后才能播放该视频</p>
            </div>
            <div class="weui-actionsheet__menu">
                <div class="weui-actionsheet__cell" onclick="buy()">立即购买</div>
                <!-- <div class="weui-actionsheet__cell" onclick="buytwo()">开通会员免费观看</div> -->
            </div>
            <div class="weui-actionsheet__action">
                <div class="weui-actionsheet__cell" id="iosActionsheetCancel">取消</div>
            </div>
        </div>
    </div>
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">购买中</p>
        </div>
    </div>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/mui.indexedlist.js"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        mui.ready(function () {
            var header = document.querySelector('header.mui-bar');
            var list = document.getElementById('list');
            var done = document.getElementById('done');
            //calc hieght
            // list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px';
           
        });
    </script>
    <script type="text/javascript">
        // ios
        $(function () {
            var $iosActionsheet = $('#iosActionsheet');
            var $iosMask = $('#iosMask');

            function hideActionSheet() {
                $iosActionsheet.removeClass('weui-actionsheet_toggle');
                $iosMask.fadeOut(200);
            }

            $iosMask.on('click', hideActionSheet);
            $('#iosActionsheetCancel').on('click', hideActionSheet);
            $("#showIOSActionSheet").on("click", function () {
                $iosActionsheet.addClass('weui-actionsheet_toggle');
                $iosMask.fadeIn(200);
            });
        });
        function buy() {
            $('#loadingToast').show();
            setTimeout(function () {
                location.href = "./buy-complete.html";
            }, 3000);
        }
        // function buytwo() {
        //     $('#loadingToast').show();
        //     setTimeout(function () {
        //         location.href = "./account-complete.html";
        //     }, 3000);
        // }
        function dianzan() {
            $('#zan').html(parseInt($('#zan').html()) + 1)
        }
    </script>
</body>
</html>